<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>响应式设计</title>
		
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--视口
			name:	viewport
			content: 
				width=device-width	宽度=设备宽度
				initial-scale=1		初始化缩放大小
				user-scalable=no	禁止缩放
		-->
			
		<!--1.内部样式-->
		<style type="text/css">
			/*屏幕宽度1300以上时适用的样式*/
			@media screen and (min-width: 1300px) {
				body{
					background: pink;
				}
			}
			/*当作用范围一样时,后面的样式会覆盖前面的*/
			@media screen and (min-width: 1300px) and (max-width: 1500px) {
				body{
					background: lightskyblue;
				}
			}
			
			@media only screen and (min-width: 640px) and (max-width: 700px) {
				body{
					background: lightcoral;
				}
			}
			/*屏幕宽度在100px与640px之间时适用的样式*/
			@media screen and (min-width: 100px) and (max-width: 640px) {
				body{
					background: lightgreen;
				}
			}
		</style>
		
		<!--2.外部样式-->
		<!--引入外部样式(屏幕宽度在700px以上时适用)-->
		<link rel="stylesheet" type="text/css" href="css/css01.css" media="screen and (min-width: 700px)" />
		
	</head>
	<body>
		<!--
			一套代码写多个css样式来适应不同的屏幕
			优缺点:
				优点:
					适应不同屏幕,灵活性强
				缺点:
					代码累赘
		--->
		<div>
			7月12日，C919大型客机102架机从上海浦东机场起飞，历经1小时46分的飞行，平稳降落在山东东营胜利机场，顺利完成首次空中远距离转场飞行。这意味着C919大型客机项目进入密集研发试飞新阶段，正式开启多地同步试飞模式，未来将接受各种复杂气象条件的考验和系列高风险试飞科目的挑战。（新华）
		</div>
		
	</body>
</html>
